<template>
    <div class="input">
        <textarea name="" id="" cols="30" rows="10"
            placeholder="摘要（必填）：会在推荐、列表等场景外露，帮助读者快速了解内容，支持一键将正文前 256 字符键入摘要文本框" 
            v-model="text" @change="changes"></textarea>
        <div class="button">
            <extract-word-vue :num="digest.length"></extract-word-vue>
            <extract-button-vue @extract="extract"></extract-button-vue>
        </div>
    </div>
</template>

<script>
import extractWordVue from '@/components/Editor/Extract/ExtractWord';
import extractButtonVue from '@/components/Editor/Extract/ExtractButton';
export default {
    props:{
        digest:''
    },
    data(){
        return{
            text:this.digest
        }
    },
    components: {
        extractWordVue,
        extractButtonVue,
    },
    methods: {
        extract() {
            this.text=this.digest;
            this.$emit('extract')
            
        },
        changes(){
            this.$emit('changes',this.text)
        }
    },
}
</script>

<style  scoped>
.input {
    position: relative;
}

textarea {
    resize: none;
    min-height: 54px;
    max-height: 54px;
    padding: 8px;
    padding-bottom: 28px;
    font-size: 14px;
    line-height: 24px;
    color: #606266;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: auto;
    width: 100%;
}

.button {
    position: absolute;
    width: 150px;
    height: 20px;
    top: 64px;
    right: 30px;
    border-radius: 4px;
}
</style>